<template>
  <div class="home">
    <div class="banner">
      <router-link to="/home/attendance" custom v-slot="{ navigate }">
        <el-link @click="navigate">
          <el-icon><Calendar /></el-icon>考勤管理
        </el-link>
      </router-link>

      <router-link to="/home/entry" custom v-slot="{ navigate }">
        <el-link @click="navigate">
          <el-icon><Suitcase /></el-icon>入职管理
        </el-link>
      </router-link>

      <router-link to="/home/department" custom v-slot="{ navigate }">
        <el-link @click="navigate">
          <el-icon><OfficeBuilding /></el-icon>部门管理
        </el-link>
      </router-link>

      <router-link to="/home/exit" custom v-slot="{ navigate }">
        <el-link @click="navigate">
          <el-icon><SoldOut /></el-icon>离职管理
        </el-link>
      </router-link>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { Calendar, Suitcase, OfficeBuilding, SoldOut } from '@element-plus/icons-vue';
</script>

<style scoped>
.home{
  width: 98%;
  height: 100%;
  background-color: #f2f2f2;
}
.banner{
  height: 5%;
  display: flex;
  align-items: center;
  padding-left: 20px;
}
.banner .el-link{
  margin-left: 30px;
  font-weight: bold;
  cursor: pointer;
}

.banner .el-link:first-child {
  margin-left: 0;
}
.el-icon{
  margin-right: 10px;
}
.main{
  height: 95%;

}
@media (max-width: 768px) {
  .home{
    width: 100% !important;
  }
}
</style>
